<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">



    <link href="https://cdn.bootcss.com/hover.css/2.1.1/css/hover-min.css" rel="stylesheet">

    <style>
        /* 两列左侧自适应布局 */

        body {
            box-sizing: border-box;
            margin: 0 auto;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .one {
            width: calc(100% - 320px);
            background-color: orangered;
            height: auto;
            min-height: auto;
        }

        .two {
            width: 300px;
            height: 100%;

            background-color: palevioletred;
        }


        .wrap {
            height: 100%;
            min-height: auto;
            margin: 20px;
        }


        .one_01>div {
            width: 100px;
            height: 100px;
            background-color: palevioletred;
            float: left;
            margin: 20px;
        }

        .one_02>div {
            width: 100px;
            height: 100px;
            background-color: palevioletred;
            float: left;
            margin: 20px;
            text-align: center;
            line-height: 100px;
        }

        .clearfix {
            clear: both;
        }
    </style>

</head>

<body>

    <div class="wrap">
        <div class="fl one">


            <div class="one_01  clearfix">
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
                <div class=""></div>
            </div>



            <div class="one_02  clearfix">


                <div class="hvr-fade">Fade</div>
                <div class="hvr-back-pulse">Back Pulse</div>
                <div class="hvr-sweep-to-right">Sweep To Right</div>
                <div class="hvr-sweep-to-left">Sweep To Left</div>
                <div class="hvr-sweep-to-bottom">Sweep To Bottom</div>
                <div class="hvr-sweep-to-top">Sweep To Top</div>
                <div class="hvr-bounce-to-right">Bounce To Right</div>
                <div class="hvr-bounce-to-left">Bounce To Left</div>
                <div class="hvr-bounce-to-bottom">Bounce To Bottom</div>
                <div class="hvr-bounce-to-top">Bounce To Top</div>
                <div class="hvr-radial-out">Radial Out</div>
                <div class="hvr-radial-in">Radial In</div>
                <div class="hvr-rectangle-in">Rectangle In</div>
                <div class="hvr-rectangle-out">Rectangle Out</div>
                <div class="hvr-shutter-in-horizontal">Shutter In Horizontal</div>
                <div class="hvr-shutter-out-horizontal">Shutter Out Horizontal</div>
                <div class="hvr-shutter-in-vertical">Shutter In Vertical</div>
                <div class="hvr-shutter-out-vertical">Shutter Out Vertical</div>

                <div class="hvr-grow">Grow</div>
                <div class="hvr-shrink">Shrink</div>
                <div class="hvr-pulse">Pulse</div>
                <div class="hvr-pulse-grow">Pulse Grow</div>
                <div class="hvr-pulse-shrink">Pulse Shrink</div>
                <div class="hvr-push">Push</div>
                <div class="hvr-pop">Pop</div>
                <div class="hvr-bounce-in">Bounce In</div>
                <div class="hvr-bounce-out">Bounce Out</div>
                <div class="hvr-rotate">Rotate</div>
                <div class="hvr-grow-rotate">Grow Rotate</div>
                <div class="hvr-float">Float</div>
                <div class="hvr-sink">Sink</div>
                <div class="hvr-bob">Bob</div>
                <div class="hvr-hang">Hang</div>
                <div class="hvr-skew">Skew</div>
                <div class="hvr-skew-forward">Skew Forward</div>
                <div class="hvr-skew-backward">Skew Backward</div>
                <div class="hvr-wobble-horizontal">Wobble Horizontal</div>
                <div class="hvr-wobble-vertical">Wobble Vertical</div>
                <div class="hvr-wobble-to-bottom-right">Wobble To Bottom Right</div>
                <div class="hvr-wobble-to-top-right">Wobble To Top Right</div>
                <div class="hvr-wobble-top">Wobble Top</div>
                <div class="hvr-wobble-bottom">Wobble Bottom</div>
                <div class="hvr-wobble-skew">Wobble Skew</div>
                <div class="hvr-buzz">Buzz</div>
                <div class="hvr-buzz-out">Buzz Out</div>
                <div class="hvr-forward">Forward</div>
                <div class="hvr-backward">Backward</div>




            </div>




        </div>
        <div class="fr two">
            <p>右侧定宽</p>
        </div>


    </div>


    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript">
        function testAnim(x, that) {
            $(that).removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                $(this).removeClass();
            });
        };


        var arr = [
            "bounce",
            "flash",
            "pulse",
            "rubberBand",
            "shake",
            "swing",
            "tada",
            "wobble",
            "bounceIn",
            "bounceInDown",
            "bounceInLeft",
            "bounceInRight",
            "bounceInUp",
            "bounceOut",
            "bounceOutDown",
            "bounceOutLeft",
            "bounceOutRight",
            "bounceOutUp",
            "fadeIn",
            "fadeInDown",
            "fadeInDownBig",
            "fadeInLeft",
            "fadeInLeftBig",
            "fadeInRight",
            "fadeInRightBig",
            "fadeInUp",
            "fadeInUpBig",
            "fadeOut",
            "fadeOutDown",
            "fadeOutDownBig",
            "fadeOutLeft",
            "fadeOutLeftBig",
            "fadeOutRight",
            "fadeOutRightBig",
            "fadeOutUp",
            "fadeOutUpBig",
            "flip",
            "flipInX",
            "flipInY",
            "flipOutX",
            "flipOutY",
            "lightSpeedIn",
            "lightSpeedOut",
            "rotateIn",
            "rotateInDownLeft",
            "rotateInDownRight",
            "rotateInUpLeft",
            "rotateInUpRight",
            "rotateOut",
            "rotateOutDownLeft",
            "rotateOutDownRight",
            "rotateOutUpLeft",
            "rotateOutUpRight",
            "hinge",
            "rollIn",
            "rollOut",
            "zoomIn",
            "zoomInDown",
            "zoomInLeft",
            "zoomInRight",
            "zoomInUp",
            "zoomOut",
            "zoomOutDown",
            "zoomOutLeft",
            "zoomOutRight",
            "zoomOutUp",
        ];

        var len = arr.length;

        function getRandomNum() {
            return Math.ceil(Math.random() * len);
        }

        $(document).ready(function () {

            $('.one_01>div').each(function () {
                var anim = arr[getRandomNum()];
                testAnim(anim, this);
            });


        });
    </script>


</body>

</html>